/*我们约定将UI稿件按20份来划分*/

@media screen and (device-width: 320px) {
    html {
        font-size: 16px;
    }
}

@media screen and (device-width: 360px) {
    html {
        font-size: 18px;
    }
}

@media screen and (device-width: 375px) {
    html {
        font-size: 18.75px;
    }
}

@media screen and (device-width: 414px) {
    html {
        font-size: 20.7px;
    }
}


/*初始化样式*/

body,
ul,
li,
h3,
h4,
p {
    padding: 0;
    margin: 0;
}

body {
    background-color: #f7f4f1;
}

a {
    display: block;
    text-decoration: none;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}


/*顶部搜索栏样式*/

.mmb_main {
    padding: 0;
    max-width: 640px;
    margin: 0 auto;
    >.header {
        height: (124rem/32);
        width: 100%;
        background-color: #ff841d;
        border: (1rem/32) solid #ff841d;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        >h1 {
            width: 85%;
            display: block;
            a {
                height: 50%;
                display: block;
                padding-left: (10rem/32);
                img {
                    display: block;
                    width: 50%;
                }
            }
        }
        >a {
            width: 15%;
            display: block;
            >img {
                margin: 0 auto;
                width: 50%;
                display: block;
            }
        }
    }
    /*搜索栏*/
    .search {
        height: (124rem/32);
        >form {
            height: 100%;
            display: flex;
            justify-content: space-between;
            position: relative;
            >span {
                position: absolute;
                top: (32rem/32);
                left: (26rem/32);
                font-size: (50rem/32);
            }
            >input {
                flex: 1;
                border: none;
                background-color: #ccc;
                height: (80rem/32);
                margin: auto (15rem/32);
                border-radius: (39rem/32);
                padding-left: (64rem/32);
                font-size: (32rem/32)
            }
            >button {
                cursor: pointer;
                width: (165rem/32);
                height: (80rem/32);
                margin: auto (15rem/32);
                font-size: (45rem/32);
                color: #fff;
                border: none;
                border-radius: (39rem/32);
                background-color: #ff841d;
            }
        }
    }
    /*导航*/
    .nav {
        width: 100%;
        border-bottom: (3rem/32) solid #ccc;
        >ul {
            list-style: none;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            >li {
                width: 25%;
                margin: (32rem/32) 0;
                >a {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    color: #555;
                    >img {
                        width: 50%;
                        display: block;
                        margin-bottom: (9rem/32);
                    }
                }
            }
        }
    }
    /*超值折扣推荐部分*/
    .super {
        width: 100%;
        .super_Top {
            width: 100%;
            height: (100rem/32);
            background-image: linear-gradient(#d35832, #ff841d);
            display: flex;
            justify-content: space-between;
            align-items: center;
            >span {
                font-size: (32rem/32);
                color: #fff;
                margin-left: (32rem/32);
            }
            >a {
                margin-right: (32rem/32);
                width: (32rem/32);
                height: (32rem/32);
                text-align: center;
                line-height: (32rem/32);
                display: block;
                color: #fff;
                border: (2rem/32) solid #fff;
                border-radius: 50%;
            }
        }
        .super_Content {
            width: 100%;
            list-style: none;
            >li {
                height: (260rem/32);
                border: (3rem/32) solid #ccc;
                border-top: none;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                >a:nth-of-type(1) {
                    display: flex;
                    flex: 1;
                    align-items: center;
                    height: 100%;
                    flex: 1;
                    color: #555;
                    >img {
                        display: block;
                        height: 75%;
                        margin-left: (20rem/32);
                    }
                    >.text {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        color: #333;
                        flex-direction: column;
                        justify-content: space-around;
                        >span:nth-of-type(1) {
                            padding-left: (32rem/32);
                            >span {
                                display: inline-block;
                                color: #d35832;
                            }
                        }
                        >span:nth-of-type(2) {
                            padding-left: (32rem/32);
                            color: #666;
                        }
                    }
                }
                >a:nth-of-type(2) {
                    padding-top: (160rem/32);
                    margin-right: (32rem/32);
                    color: #aaa;
                    &:hover {
                        color: #d35832;
                    }
                    >span {
                        margin-right: (16rem/32);
                    }
                }
            }
        }
    }
    /*更多优惠*/
    .more_discounts {
        width: 100%;
        position: relative;
        .block {
            visibility: visible;
        }
        .hidden {
            position: absolute;
            top: -3rem;
            left: 6rem;
            width: 26rem;
            height: 3rem;
            line-height: 3rem;
            font-size: 2.6rem;
            border: (3rem/32) solid #d35832;
            text-align: center;
            color: #d35832;
            background-color: rgba(217, 247, 86, 0.5);
            border-radius: 0.5rem;
            // overflow: hidden;
            display: none;
        }
        >a {
            display: block;
            width: 98%;
            height: (64rem/32);
            line-height: (64rem/32);
            text-align: center;
            color: #555;
            background-color: #ddd;
            margin: (16rem/32) (16rem/32);
            border-radius: (10rem/32);
            >span {
                font-size: (10rem/32)
            }
        }
    }
    /*品牌排行*/
    .brand_All {
        >a {
            display: flex;
            height: (64rem/32);
            justify-content: space-between;
            align-items: center;
            color: #fff;
            background-color: #ff841d;
            padding: 0 (32rem/32);
        }
    }
    /*登录与返回顶部*/
    .login {
        width: 100%;
        height: (120rem/32);
        background-color: #ddd;
        display: flex;
        flex-direction: column-reverse;
        >ul {
            width: 100%;
            height: 50%;
            list-style: none;
            >li {
                width: 33.33%;
                height: 100%;
                border: (3rem/32) solid #aaa;
                float: left;
                box-sizing: border-box;
                text-align: center;
                >a {
                    margin-top: (8rem/32);
                    display: block;
                    color: #000;
                    font-size: (24rem/32);
                    font-weight: bold;
                }
            }
            >li:nth-last-of-type(1) {
                >a {
                    margin-top: (0rem/32);
                    >span {
                        font-size: (46rem/32);
                    }
                }
            }
        }
    }
    /*footer部分样式*/
    .footer {
        width: 100%;
        height: (150rem/32);
        background-color: #ddd;
        text-align: center;
        >.footer_App {
            padding-top: (32rem/32);
            font-size: (10rem/32);
            >a {
                display: inline-block;
                color: red;
            }
        }
        >.mmb_url {
            >a {
                color: #333;
                &:hover {
                    color: #d35832;
                }
            }
        }
    }
}